<template>
  <div>
    <!-- class="main-el-contarner" -->
    <el-container>
      <el-main>
        <div class="kanbao-bigbox">
          <div class="righttop-search-box">
            <el-form
              :inline="true"
              :model="param"
              label-width="100px"
              @submit.native.prevent
            >
              <el-form-item label="告警分类" label-width="90px">
                <el-select
                  v-model="param.warnStatus"
                  placeholder="告警分类"
                  :clearable="true"
                  size="small"
                  style="width: 150px"
                  @keyup.enter.native="onSearch"
                >
                  <!-- <el-option label="故障告警" value="1"></el-option>
                                    <el-option label="离线告警" value="2"></el-option>
                                    <el-option label="消防告警" value="3"></el-option>
                                    <el-option label="周界告警" value="4"></el-option>
                                    <el-option label="周位告警" value="5"></el-option> -->
                  <el-option
                    v-for="item in AlarmCategoryData"
                    :key="item.base_class"
                    :label="item.base_desc"
                    :value="item.base_class"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" label-width="10px">
                <el-input
                  placeholder="请输入事件名称关键字检索"
                  v-model="param.name"
                  clearable
                  size="small"
                  style="width: 350px"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="onSearch">查找</el-button>
              </el-form-item>

              <el-form-item style="float: right">
                <el-button size="mini" type="primary" plain @click="handleAdd"
                  ><i class="el-icon-download"></i> 导出数据</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="container-box">
            <el-table
              :data="tabledatas"
              ref="talbes"
              border
              stripe
              max-height="480px"
              :header-cell-style="{
                background: '#cfcfcf',
                color: '#000000',
                'text-align': 'center',
              }"
              :cell-style="{ 'text-align': 'center' }"
              style="width: 100%"
              size="small"
              @selection-change="selectionChange"
              @row-click="handleRowClick"
            >
              <el-table-column
                type="selection"
                header-align="center"
                width="60"
              ></el-table-column>
              <el-table-column prop="event_name" label="事件名称"> </el-table-column>
              <el-table-column prop="is_turn_to_order" label="是否转工单">
                <template #default="scope">
                  <span v-if="scope.row.is_turn_to_order == 0">是</span>
                  <span v-if="scope.row.is_turn_to_order == 1">否</span>
                </template>
              </el-table-column>
              <el-table-column prop="alarm_level" label="告警等级">
                <template #default="scope">
                  <font v-if="scope.row.alarm_level == '1'">紧急</font>
                  <font v-else-if="scope.row.alarm_level == '2'">重要</font>
                  <font v-else-if="scope.row.alarm_level == '3'">次要</font>
                  <font v-else-if="scope.row.alarm_level == '4'">警告</font>
                  <font v-else-if="scope.row.alarm_level == '5'">通知</font>
                  <font v-else-if="scope.row.alarm_level == '255'">所有级别</font>
                  <font v-else>/</font>
                </template>
              </el-table-column>
              <el-table-column prop="alarm_type" label="告警分类">
                <template #default="scope">
                  <span v-if="scope.row.alarm_type == 1">其他警告</span>
                  <span v-if="scope.row.alarm_type == 2">设备告警</span>
                  <span v-if="scope.row.alarm_type == 3">性能告警</span>
                  <span v-if="scope.row.alarm_type == 4">安全告警</span>
                  <span v-if="scope.row.alarm_type == 5">配置告警</span>
                  <span v-if="scope.row.alarm_type == 6">应用告警</span>
                  <span v-if="scope.row.alarm_type == 9">虚拟化平台</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="start_date"
                label="开始时段"
                width="120"
                :formatter="dateFormat"
              >
              </el-table-column>
              <el-table-column
                prop="end_date"
                label="结束时段"
                width="120"
                :formatter="dateFormat"
              >
              </el-table-column>
              <el-table-column prop="inform_type" label="通知类型">
                <template #default="scope">
                  <span v-if="scope.row.inform_type == 1">故障通知</span>
                  <span v-if="scope.row.inform_type == 2">离线通知</span>
                  <span v-if="scope.row.inform_type == 3">消防通知</span>
                  <span v-if="scope.row.inform_type == 4">周界通知</span>
                  <span v-if="scope.row.inform_type == 5">周位通知</span>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="inform_template_id" label="通知模板ID">
                            </el-table-column> -->
              <el-table-column prop="inform_template" label="通知模板"> </el-table-column>
              <el-table-column prop="inform_way" label="通知方式">
                <template #default="scope">
                  <div v-for="(val, index) in scope.row.inform_way" :key="index">
                    <span v-if="val == '1'">企业微信</span>
                    <span v-if="val == '2'">钉钉</span>
                    <span v-if="val == '3'">邮件</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="user_name"
                label="通知对象"
                width="200"
              ></el-table-column>
              <el-table-column prop="inform_content" label="通知内容"> </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button
                    type="text"
                    @click="deleteClick(scope.row)"
                    style="color: #ff0000"
                    ><i class="el-icon-delete"></i>删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <div class="pagebox">
              <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="param.pageNo"
                :page-sizes="[10, 30, 50, 100, 500]"
                :page-size="param.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataTotal"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import SideHeader from "@/views/inc/SideHeader";
import Navlanmu from "@/views/inc/Navlanmu";
import LeftMenuMessage from "@/views/inc/LeftMenuMessage";
import { getDateTimes, numFormat, getDateWeek, downloadCallback } from "@/utils/index.js";
import { getlist, getexpro, getAlarmCategory, getdeletes } from "@/api/message/list";
import moment from "moment";

export default {
  props: {
    alarmEvent: {
      type: String,
      default: "",
    },
  },
  name: "Eventalarm",
  components: { SideHeader, Navlanmu, LeftMenuMessage },
  data() {
    return {
      loadingdata1: false,
      isloading: false,
      param: {
        funId: "msg_event_alarm",
        baseSQL: "",
        warnStatus: "",
        name: "",
        offset: 0,
        pageNo: 1,
        limit: 10,
      },
      dataTotal: 0,
      tabledatas: [],
      selectionChangeData: "",
      event_id: this.alarmEvent,
      AlarmCategoryData: [],
    };
  },
  mounted() {
    //
    // this.getDatas()
  },
  created() {
    this.isloading = false;
    this.getDatas();
  },
  methods: {
    //删除
    deleteClick(info) {
      console.log(info);
      var tablefromdata = {
        funId: "msg_event_alarm",
        ids: info.alarm_setting_id,
      };
      this.$confirm(`确定删除${info.event_name}？, 是否删除?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        getdeletes(tablefromdata).then((res) => {
          if (res.data.code == "200") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getDatas();
          } else {
            this.$message({
              message: "删除失败",
              type: "error",
            });
          }
        });
      });
    },
    // 复选框按钮
    selectionChange(e) {
      this.selectionChangeData = e;
    },
    handleRowClick(e) {
      this.$refs.talbes.toggleRowSelection(e);
      const _selectData = this.$refs.talbes.selection;
      this.selectionChange(_selectData);
    },
    handleAdd() {
      let fromData = {
        exportFields: [],
        ids: [],
        funId: "msg_event_alarm",
      };
      //动态获取表头
      let fields = [];
      this.$refs.talbes.$children.forEach((item) => {
        if (item.label != undefined && item.prop != undefined) {
          fields.push({
            title: item.label,
            value: item.prop,
          });
        }
        fromData.exportFields = JSON.stringify(fields);
      });
      //获取主键ID
      if (this.selectionChangeData.length != 0) {
        this.selectionChangeData.forEach((item, index) => {
          if (index != 0) {
            fromData.ids += ";";
          }
          fromData.ids += item.alarm_setting_id;
        });
      } else {
        this.tabledatas.forEach((item, index) => {
          if (index != 0) {
            fromData.ids += ";";
            // console.log('fromData.ids',fromData.ids)
          }
          fromData.ids += item.alarm_setting_id;
        });
      }
      downloadCallback(fromData, this.selectionChangeData.length);
    },
    // 数据搜索按钮
    onSearch() {
      this.param.pageNo = 1;
      this.getDatas();
      console.log("this.event_id", this.event_id);
    },
    getDatas() {
      // if (this.param.warnStatus == '' && this.param.name == '') {
      //     this.param.baseSQL = ''
      // } else {
      this.param.baseSQL =
        'alarm_type like "%' +
        this.param.warnStatus +
        '%" and ' +
        'event_name like"%' +
        this.param.name +
        '%" and ' +
        'event_id like "%' +
        this.event_id +
        '%"';
      // }
      getlist(this.param).then((res) => {
        if (res.status == "200") {
          let resdata = res.data;
          this.tabledatas = resdata.rows;
          this.$emit("getEvenalarmData", this.tabledatas);
          this.dataTotal = resdata.total;
        }
        this.getAlarmtype();
      });
    },
    getAlarmtype() {
      getAlarmCategory().then((res) => {
        if (res.status == "200") {
          let resdata = res.data;
          if (resdata.code == "200") {
            this.AlarmCategoryData = resdata.data;
          }
        }
      });
    },
    indexMethod(index) {
      return (this.param.pageNo - 1) * this.param.limit + index + 1;
    },
    sizeChange(val) {
      this.param.limit = val;
      this.getDatas();
    },
    currentChange(val) {
      this.param.pageNo = val;
      this.param.offset = (val - 1) * this.param.limit;
      this.getDatas();
    },
    dateFormat(row, column, cellValue, index) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("HH:mm:ss");
    },
  },
};
</script>
<style>
.kanbao-bigbox .el-loading-spinner .el-loading-text {
  color: #666 !important;
}
</style>
<style scoped>
.el-main {
  padding: 0px !important;
}

.kanbao-bigbox {
  margin-top: 0px;
}
</style>
<style scoped>
.righttop-search-box {
  background: #f8f8f8;
  padding: 8px 20px 7px 20px;
  border-bottom: 1px solid #ececec;
  position: fixed;
  top: 0;
  width: calc(100% - 25px);
  z-index: 4;
}

.righttop-search-box .el-form-item {
  margin-bottom: 0px !important;
}

.container-box {
  padding: 10px 0px;
  margin: 50px 0;
}

.pagebox {
  text-align: right;
  padding: 10px;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  background-color: #ececec;
  z-index: 4;
}
</style>
